tests: showcase borders with non-solid backgrounds

This commit adds a few more examples to borders.js
that render borders with various combinations of
gradients, background images, shadows, and
border-images.

https://bugzilla.gnome.org/show_bug.cgi?id=636976

diff --git a/tests/Makefile.am b/tests/Makefile.am
index 9fb38a29495df1b11168c83fb0f840b0096cb4c7..5958ffb113840ceb340876d24894edf5b1708254 100644 (file)
--- a/tests/Makefile.am
+++ b/tests/Makefile.am
@@ -15,6 +15,7 @@ TEST_JS =                                     \
        interactive/scroll-view-sizing.js       \
        interactive/table.js                    \
        testcommon/border-image.png             \
+       testcommon/face-plain.png               \
        testcommon/ui.js                        \
        unit/format.js
 EXTRA_DIST += $(TEST_JS)

diff --git a/tests/interactive/borders.js b/tests/interactive/borders.js
index 7c5cda13a403ed1a622e90a2e71231e5f112d99c..5c97ea1057f828b108442c50e0dddecfd3831c57 100644 (file)
--- a/tests/interactive/borders.js
+++ b/tests/interactive/borders.js
@@ -71,6 +71,65 @@ box.add(new St.Label({ text: "Border Image",
                        style_class: "border-image",
                        style: "padding: 10px;" }));
 
+box.add(new St.Label({ text: "Border Image with Gradient",
+                       style_class: 'border-image-with-background-gradient',
+                       style: "padding: 10px;"
+                              + 'background-gradient-direction: vertical;' }));
+
+box.add(new St.Label({ text: "Rounded, framed, shadowed gradients" }));
+
+let framedGradients = new St.BoxLayout({ vertical: false,
+                                         style: 'padding: 10px; spacing: 12px;' });
+box.add(framedGradients);
+
+function addGradientCase(direction, borderWidth, borderRadius, extra) {
+    let gradientBox = new St.BoxLayout({ style_class: 'background-gradient',
+                                         style: 'border: ' + borderWidth + 'px solid #8b8b8b;'
+                                                + 'border-radius: ' + borderRadius + 'px;'
+                                                + 'background-gradient-direction: ' + direction + ';'
+                                                + 'width: 32px;'
+                                                + 'height: 32px;'
+                                                + extra });
+    framedGradients.add(gradientBox, { x_fill: false, y_fill: false } );
+}
+
+addGradientCase ('horizontal', 0, 5,  '-st-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
+addGradientCase ('horizontal', 2, 5,  '-st-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
+addGradientCase ('horizontal', 5, 2,  '-st-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
+addGradientCase ('horizontal', 5, 20, '-st-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
+addGradientCase ('vertical', 0, 5,    '-st-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
+addGradientCase ('vertical', 2, 5,    '-st-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
+addGradientCase ('vertical', 5, 2,    '-st-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
+addGradientCase ('vertical', 5, 20,   '-st-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
+
+box.add(new St.Label({ text: "Rounded, framed, shadowed images" }));
+
+let framedImages = new St.BoxLayout({ vertical: false,
+                                      style: 'padding: 10px; spacing: 6px;' });
+box.add(framedImages);
+
+function addBackgroundImageCase(borderWidth, borderRadius, width, height, extra) {
+    let imageBox = new St.BoxLayout({ style_class: 'background-image',
+                                      style: 'border: ' + borderWidth + 'px solid #8b8b8b;'
+                                             + 'border-radius: ' + borderRadius + 'px;'
+                                             + 'width: ' + width + 'px;'
+                                             + 'height: ' + height + 'px;'
+                                             + extra });
+    framedImages.add(imageBox, { x_fill: false, y_fill: false } );
+}
+
+addBackgroundImageCase (0, 0, 32, 32, 'background-position: 2px 5px');
+addBackgroundImageCase (0, 0, 16, 16, '-st-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5); background-color: rgba(0,0,0,0)');
+addBackgroundImageCase (0, 5, 32, 32, '-st-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);');
+addBackgroundImageCase (2, 5, 32, 32, '-st-shadow: 0px 2px 0px 0px rgba(0,255,0,0.5);');
+addBackgroundImageCase (5, 2, 32, 32, '-st-shadow: 2px 0px 0px 0px rgba(0,0,255,0.5);');
+addBackgroundImageCase (5, 20, 32, 32, '-st-shadow: 0px 0px 4px 0px rgba(255,0,0,0.5);');
+addBackgroundImageCase (0, 5, 48, 48, '-st-shadow: 0px 0px 0px 4px rgba(0,0,0,0.5);');
+addBackgroundImageCase (5, 5, 48, 48, '-st-shadow: 0px 0px 4px 4px rgba(0,0,0,0.5);');
+addBackgroundImageCase (0, 5, 64, 64, '-st-shadow: -2px -2px 6px 0px rgba(0,0,0,0.5);');
+addBackgroundImageCase (5, 5, 64, 64, '-st-shadow: -2px -2px 0px 6px rgba(0,0,0,0.5);');
+addBackgroundImageCase (0, 5, 32, 32, 'background-position: 2px 5px');
+
 stage.show();
 Clutter.main();
 stage.destroy();

diff --git a/tests/testcommon/face-plain.png b/tests/testcommon/face-plain.png
new file mode 100644 (file)
index 0000000..962d70f
Binary files /dev/null and b/tests/testcommon/face-plain.png differ

diff --git a/tests/testcommon/test.css b/tests/testcommon/test.css
index d1005eeb3097be1d6ef72f4a37d47fe6634f749a..34611118b0c7c61d23fbac9ffcf3889c101ed08f 100644 (file)
--- a/tests/testcommon/test.css
+++ b/tests/testcommon/test.css
@@ -37,6 +37,23 @@ stage {
     border-image: url('border-image.png') 16;
 }
 
+.background-gradient {
+    background-gradient-start: #88ff88;
+    background-gradient-end: #8888ff;
+}
+
+.border-image-with-background-gradient {
+    border: 15px black solid;
+    border-image: url('border-image.png') 16;
+    background-gradient-start: #88ff88;
+    background-gradient-end: #8888ff;
+}
+
+.background-image {
+    background-image: url('face-plain.png');
+    background-color: white;
+}
+
 .push-button {
     background: #eeddbb;
     border: 1px solid black;